<!doctype html>
<html>

<head>
  <meta charset="utf8">
  <!-- INSERT BASE -->
  <style>
    html,
    body {
      padding: 0px;
      margin: 0px;
      background-color: #f7f7f7;
      line-height: 1.42857143;
    }

    * {
      box-sizing: border-box;
    }
  </style>
  <script src="forms/grist-form-submit.js"></script>
  <script src="forms/purify.min.js"></script>
  <style>
    .grist-form-container {
      color: #262633;
      background-color: #f7f7f7;
      min-height: 100%;
      width: 100%;
      padding-top: 52px;
      padding-bottom: 32px;
      font-size: 13px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .grist-form-container .grist-form-confirm {
      text-align: center;
    }

    form.grist-form {
      padding: 32px;
      margin: 0px auto;
      background-color: white;
      border: 1px solid #E8E8E8;
      width: 640px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: calc(100% - 32px);
    }

    form.grist-form .grist-field {
      display: flex;
      flex-direction: column;
    }

    form.grist-form .grist-field label {
      font-size: 15px;
      margin-bottom: 8px;
      font-weight: normal;
    }

    form.grist-form .grist-field .grist-field-description {
      font-size: 10px;
      font-weight: 400;
      margin-top: 4px;
      color: #929299;
      white-space: pre-wrap;
    }

    form.grist-form .grist-field input[type="text"] {
      padding: 4px 8px;
      border-radius: 3px;
      border: 1px solid #D9D9D9;
      font-size: 13px;
      outline-color: #16b378;
      outline-width: 1px;
      line-height: inherit;
      width: 100%;
    }

    form.grist-form input[type="submit"] {
      background-color: #16b378;
      border: 1px solid #16b378;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      line-height: inherit;
    }

    form.grist-form input[type="datetime-local"] {
      width: 100%;
      line-height: inherit;
    }

    form.grist-form input[type="date"] {
      width: 100%;
      line-height: inherit;
    }

    form.grist-form input[type="submit"]:hover {
      border-color: #009058;
      background-color: #009058;
    }

    form.grist-form input[type="checkbox"] {
      margin: 0px;
    }

    form.grist-form .grist-columns {
      display: grid;
      grid-template-columns: repeat(var(--grist-columns-count), 1fr);
      gap: 4px;
    }

    form.grist-form select {
      padding: 4px 8px;
      border-radius: 3px;
      border: 1px solid #D9D9D9;
      font-size: 13px;
      outline-color: #16b378;
      outline-width: 1px;
      background: white;
      line-height: inherit;
      flex: auto;
      width: 100%;
    }

    form.grist-form .grist-choice-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
  </style>

</head>

<body>
  <main class='grist-form-container'>
    <form class='grist-form'
          onsubmit="event.target.parentElement.querySelector('.grist-form-confirm').style.display = 'block', event.target.style.display = 'none'"
          data-grist-doc="<!-- INSERT DOC URL -->"
          data-grist-table="<!-- INSERT TABLE ID -->">
      <script>
        document.write(DOMPurify.sanitize(`<!-- INSERT CONTENT -->`));
      </script>
    </form>
    <div class='grist-form-confirm' style='display: none'>
      Thank you! Your response has been recorded.
    </div>
  </main>
</body>

</html>
